<template>
	<view class="my-info-page">
		<view class="info-area">
			<view class="area-sty">
				<view>姓名：{{studentObj.stdNm}}</view>
				<view>年龄：{{studentObj.age}}</view>
				<view>性别：{{studentObj.gender == 0?'女':'男'}}</view>
				<view>身高：{{studentObj.height||''}}</view>
				<view>体重：{{studentObj.weight||''}}</view>
			</view>
			<view class="area-sty" style="text-align: right;">
				<img style="width: 158px;height: 188px;" :src="studentObj.imgUrl" alt="">
			</view>
		</view>
		<view class="info-area-b">
			<view class="isTab'">学员各项指标</view>
		</view>
		<view>
			<view class="echarts-wrap">
				<view class="container">
					<uni-ec-canvas :ec="ec" ref="canvas" canvas-id="multi-charts-pie"></uni-ec-canvas>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
	import {getDataFn} from '@/utils/baseFn.js';
	const db = uniCloud.database();
	const dbCmd = db.command;
	let chart = null
	export default {
		components: {
			uniEcCanvas,
		},
		data() {
			return {
				where: {
					deleted_at: null
				},
				studentObj: {
					imgUrl: '',
					stdNm: '',
					age: '',
					height: '',
					weight: ''
				},
				ec: {
					option: {}
				},
				beforData: [],
				afterData: []
			}
		},
		onLoad(op) {
			this.studentObj = {
				...this.studentObj,
				...JSON.parse(op.parm)
			}
			this.getStudentData()
		},
		onShow() {
			const _this = this
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					if (res.data) {
						const arr = []
						const file = res.data.portrait.split(',')
						_this.userInfo = res.data
					}
				},
				fail: function(res) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
		},
		created() {},
		mounted() {},
		methods: {
			getStudentData() {
				this.where._id = this.studentObj._id
				const parm =
					'gender,endurance,explosiveness,bounce,shooting,dribbling,enduranceN,explosivenessN,bounceN,shootingN,dribblingN'
				getDataFn('student-MGMT', this.where, 0, parm).then(
					res => {
						const data = res.data[0]
						this.studentObj = {
							...this.studentObj,
							...data
						}
						// endurance耐力 explosiveness爆发力 bounce弹跳力 shooting投篮 dribbling控球
						this.beforData = [data.endurance, data.explosiveness, data.bounce, data.shooting, data
							.dribbling
						]
						this.afterData = [data.enduranceN, data.explosivenessN, data.bounceN, data.shootingN,
							data.dribblingN
						]
						setTimeout(() => {
							this.$refs.canvas.setOption(this.getOption(this.beforData, this.afterData), true);
						}, 888)
					})
			},
			getOption(bArr, aArr) {
				const op = {
					color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
						'#ea7ccc'
					],
					title: {
						text: '' // 学员各项指数
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						left: 'center',
						textStyle: {
							fontSize: 20
						},
						data: [
							'训练前',
							'训练后'
						]
					},
					radar: [{
						indicator: [{
								text: '耐力',
								max: 100
							},
							{
								text: '爆发力',
								max: 100
							},
							{
								text: '弹跳',
								max: 100
							},
							{
								text: '投篮',
								max: 100
							},
							{
								text: '控球',
								max: 100
							}
						],
						radius: 150, // 设置半径调整图形的大小
						center: ['50%', '60%']
					}],
					series: [{
						type: 'radar',
						radarIndex: 0,
						areaStyle: {},
						data: [{
								value: bArr, // bArr,
								name: '训练前'
							},
							{
								value: aArr, // aArr,
								name: '训练后'
							}
						]
					}]
				}
				return op
			}
		}
	}
</script>

<style lang="less" scoped>
	.student-detail {}
	.info-area,
	.info-area-b {
		display: flex;
	}
	
	.info-area view {
		flex: 1;
		font-size: 32rpx;
		font-weight: 500;
		padding: 8px;
	}
	
	.info-area-b view {
		flex: 1;
		text-align: center;
		line-height: 50px;
		font-size: 36rpx;
		font-weight: 600;
	}
	
	.isTab {
		color: #fc993b;
	}
	.echarts-wrap {
	}
	
	.container {
		margin-top: 20px;
		width: 750rpx;
		height: 750rpx;
	}
</style>